<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门指南——列表渲染</title>
    <link rel="stylesheet" href="common.css">
    <script type="importmap">
        {
            "imports":{
                "vue" : "https://lib.baomitu.com/vue/latest/vue.esm-browser.js"
            }
        }
    </script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in items">{{item.message}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in items">{{index+1}} - {{parentMsg}} - {{item.message}}</li>
        </ul>
        <ul>
            <li v-for="({message},index) in items">{{index+1}} - {{parentMsg}} - {{message}}</li>
        </ul>
        <ul>
            <li v-for="{message} in items">{{message}}</li>
        </ul>
        <ul>
            <li v-for="value in myObject">{{value}}</li>
        </ul>
        <ul>
            <li v-for="(value,key) in myObject">{{key}} - {{value}}</li>
        </ul>
        <ul>
            <li v-for="(value,key,index) in myObject">{{index+1}} - {{key}} - {{value}}</li>
        </ul>
        <ul>
            <li v-for="n in 5">{{n}}</li>
        </ul>
        <ul>
            <li v-for="num of numArray">{{num}}</li>
        </ul>
        <ul><button @click="addNum">测试</button></ul>
    </div>
    <script type="module">
        import {createApp} from "vue";

        createApp({
            data(){
                return{
                    items:[
                        {message:"消息1"},
                        {message:"消息2"},
                        {message:"消息3"},
                    ],
                    parentMsg: "v-for指令外部的变量",
                    myObject:{
                        title:"标题",
                        content:"内容",
                        author:"作者",
                    },
                    numArray:[1,3,5,7],
                };
            },
            methods:{
                addNum(){
                    setInterval(()=>{
                        this.numArray.push(this.numArray[this.numArray.length-1]+2);
                    },2000)
                },
            }
        }).mount("#app");
        
    </script>
</body>
</html>